@import "./dz-vue-var.scss";
html {
  direction: ltr;
  height: 100%;
}

html,
body {
  height: 100%;
  margin: 0;
  background-color: #f5f7fa;
}

#app{
  height: 100%;

  .dz-default-layout{
    height: 100%;

    .el-aside{
      background-color: #fff;
      width: 200px;
    }

    .aside-collapse{
      width: 64px;
    }

    .el-header{
      padding-left: 0px;
      box-shadow: 0 1px 10px #0003;
      background-color: #fff;
      display: flex;
      flex-direction: row;


      .el-menu--horizontal > .el-menu-item.is-active{
        // background-color: var(--el-color-primary-light-8);
        border-bottom: 4px solid var(--el-menu-active-color);
        // box-shadow: 0 1px 10px var(--el-menu-active-color);
      }
    }

    
    .logo {
      width: 200px;
      font-size: 24px;
      color:rgba(255, 255, 255, 1);
      background: var(--el-color-primary);
      display: flex;
      align-items: center;
      justify-content: center;
    }
  }

  .trigger {
    color: #fff;
    font-size: 18px;
    line-height: 64px;
    padding: 0 24px;
    cursor: pointer;
    transition: color 0.3s;
  }

  .trigger:hover {
    color: #fff;
    
  }

  .header-item{
    padding: 2px 8px;
    
  }

  .header-item:hover {
    background-color: var(--el-color-primary-light-9)
  }

  .header-right{
    font-size: 24px;
    cursor: pointer;
    margin-left: auto;
    display: flex;
    align-items: center;
  }

}


.fade-enter-active, .fade-leave-active {
  transition: opacity .5s ease;
}

.fade-enter-from, .fade-leave-to {
  opacity: 0;
}

.slide-fade-enter-active {
  transition: all .3s ease-out;
}
.slide-fade-leave-active {
  transition: all .8s cubic-bezier(1.0, 0.5, 0.8, 1.0);
}

.slide-fade-enter-from,
.slide-fade-leave-to {
  transform: translateX(20px);
  opacity: 0;
}

/*
.header{
  display: flex;

  
  .header-app {
    background: rgba(0, 0, 0, 0);
    color:rgba(255, 255, 255, 1);


    .ant-menu-item-selected{
      background-color: rgba(255, 255, 255, 1);
    }

    .ant-menu-item-active{
      background-color: rgba(255, 255, 255, 0.75);
    }

  }

  .header-item{
    color: #fff;
    font-size: 24px;
    line-height: 48px;
    height: 48px;
    padding: 0 8px ;
    cursor: pointer;
    transition: color 0.3s;  
  }

  .header-item:hover {
    background-color: rgba(255,255,255,0.2);
  }

  .header-right{
    margin-left: auto;
    margin-right: -25px;
    display: flex;
    padding: 8px 0 8px 0;
  }
  
}

*/